// mine/pages/animation/demo2/index.ts
Page({

    /**
     * 页面的初始数据
     */
    data: {
        navBarHeight: getApp().globalData.navBarHeight,
        preurl: '',   //图片临时存储地址
        canvas: new Object(),
        signCanvas: new Object(),
        signCtx: null,
        width: 0,
        height: 0,
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad() {
        this.drawPost()
        this.drawSigninature()
    },

    // 绘制第一个海报
    drawPost() {
        const query = wx.createSelectorQuery()
        query.select('#myCanvas')
            .fields({ node: true, size: true })
            .exec((res) => {
                // 获取canvas对象，并赋值
                const canvas = res[0].node
                // console.log(res[0])
                this.setData({
                    canvas
                })

                // 获取 canvas 实例
                const ctx = canvas.getContext('2d')

                // 不同机型的像素比
                const dpr = wx.getSystemInfoSync().pixelRatio
                // console.log(dpr)

                // 设置画布宽高，也可以在style属性中设置
                canvas.width = res[0].width * dpr
                canvas.height = res[0].height * dpr

                // 之后画的图横纵坐标会缩放，将px转换成dpr
                ctx.scale(dpr, dpr);

                // --------------------以上是通用内容，都必须填写的------------------

                // 圆角矩形
                ctx.beginPath();  //开始创建一个路径
                this.arcRect(ctx, this.createRpx2px(50), this.createRpx2px(50), this.createRpx2px(650), this.createRpx2px(700), this.createRpx2px(20))  //圆角矩形
                ctx.fillStyle = '#FFFFFF';  //填充颜色
                ctx.fill();  //填充路径

                // 画直线
                ctx.beginPath();
                ctx.strokeStyle = 'blue';  //线条颜色
                ctx.moveTo(this.createRpx2px(100), this.createRpx2px(650))
                ctx.arcTo(this.createRpx2px(100), this.createRpx2px(100), this.createRpx2px(120), this.createRpx2px(100), this.createRpx2px(20))
                ctx.lineTo(this.createRpx2px(300), this.createRpx2px(100))
                ctx.moveTo(this.createRpx2px(450), this.createRpx2px(100))
                ctx.arcTo(this.createRpx2px(650), this.createRpx2px(100), this.createRpx2px(650), this.createRpx2px(120), this.createRpx2px(20))
                ctx.lineTo(this.createRpx2px(650), this.createRpx2px(650))
                ctx.stroke();

                // 画矩形
                // ctx.beginPath();  //开始路径，和closePath一起实现路径分开
                // ctx.rect(this.createRpx2px(200),this.createRpx2px(200),this.createRpx2px(200),this.createRpx2px(200))  //绘制矩形，参数：x,y,w,h
                // ctx.fillStyle = 'red';  //填充颜色
                // ctx.strokeStyle = 'red';  //线条颜色
                // ctx.fill()    //填充路径
                // ctx.stroke();  //画出路径

                // 画圆弧
                // ctx.beginPath()
                // // arc(x, y, radius, startAngle, endAngle, anticlockwise)
                // // 画一个以（x,y）为圆心的以 radius 为半径的圆弧（圆），从 startAngle 开始到 endAngle 结束，按照 anticlockwise 给定的方向（默认为顺时针）来生成。
                // ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制整个圆
                // ctx.moveTo(110, 75);
                // ctx.arc(75, 75, 35, 0, Math.PI, false);   // 口 (顺时针)，半圆
                // ctx.moveTo(65, 65);
                // ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // 左眼
                // ctx.moveTo(95, 65);
                // ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // 右眼
                // ctx.stroke();

                // 写文字，fillText定位的是汉子的左下角，英文的四格线从上往下第三条线
                // ctx.fillStyle = 'black'
                // ctx.font = `bold ${this.createRpx2px(80)}px serif`
                // ctx.fillText('你好世界', this.createRpx2px(50), this.createRpx2px(120))

                // 贝塞尔曲线
                // ctx.beginPath();
                // ctx.fillStyle = 'red'
                // ctx.moveTo(75, 40);
                // ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
                // ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
                // ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
                // ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
                // ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
                // ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
                // ctx.fill();

                // Path2D封装路径
                // var heart=new Path2D()
                // ctx.moveTo(75, 40);
                // ctx.fillStyle = 'red'
                // heart.bezierCurveTo(75, 37, 70, 25, 50, 25);
                // heart.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
                // heart.bezierCurveTo(20, 80, 40, 102, 75, 120);
                // heart.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
                // heart.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
                // heart.bezierCurveTo(85, 25, 75, 37, 75, 40);
                // ctx.fill(heart);
            })
    },

    // 电子签名
    drawSigninature() {
        const query = wx.createSelectorQuery()
        query.select('#e-signature')
            .fields({ node: true, size: true })
            .exec((res) => {
                // 获取canvas对象，并赋值
                const canvas = res[0].node
                // console.log(res[0])

                // 获取 canvas 实例
                const ctx = canvas.getContext('2d')

                // 不同机型的像素比
                const dpr = wx.getSystemInfoSync().pixelRatio
                // console.log(dpr)

                // 设置画布宽高，也可以在style属性中设置
                canvas.width = res[0].width * dpr
                canvas.height = res[0].height * dpr

                // 之后画的图横纵坐标会缩放，将px转换成dpr
                ctx.scale(dpr, dpr);

                this.setData({
                    signCanvas: canvas,
                    signCtx: ctx,
                    width: res[0].width,
                    height: res[0].height
                })

                // 圆角矩形
                ctx.beginPath();  //开始创建一个路径
                ctx.fillStyle = '#FFFFFF';  //填充颜色
                ctx.strokeStyle = '#FFFFFF';
                this.arcRect(ctx, 0, 0, this.createRpx2px(600), this.createRpx2px(300), this.createRpx2px(20))  //圆角矩形
                ctx.fill();  //填充路径
            })
    },
    // 记录开始点
    bindtouchstart(e: any) {
        this.data.signCtx.beginPath()
        this.data.signCtx.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)
    },
    bindtouchmove(e: any) {
        this.data.signCtx.lineWidth = 2      // 设置线条宽度
        this.data.signCtx.strokeStyle = 'red'
        this.data.signCtx.lineTo(e.changedTouches[0].x, e.changedTouches[0].y);
        this.data.signCtx.stroke();
        this.data.signCtx.moveTo(e.changedTouches[0].x, e.changedTouches[0].y);
    },
    // 清空画布
    clear() {
        this.data.signCtx.beginPath()
        this.data.signCtx.clearRect(0, 0, this.data.width, this.data.height)
    },
    // 转化单位进制,将rpx转换成px
    createRpx2px(rpx: number) {
        return wx.getSystemInfoSync().windowWidth / 750 * rpx
    },
    // 封装一个画线的方法
    drawLine(ctx: any, x1: any, y1: any, x2: any, y2: any, width: any) {
        // 当线宽为偶数时，坐标应指定为整数。否则坐标应指定为整数+0.5px。
        let newx1 = width % 2 === 0 ? Math.floor(x1) : Math.floor(x1) + 0.5;
        let newx2 = width % 2 === 0 ? Math.floor(x2) : Math.floor(x2) + 0.5;
        ctx.lineWidth = width;
        ctx.moveTo(newx1, y1);
        ctx.lineTo(newx2, y2);
    },
    //绘画圆角矩形
    //入参说明：上下文、左上角X坐标，左上角Y坐标，宽，高，圆角的半径
    arcRect(ctx: any, x: any, y: any, w: any, h: any, r: any) {
        // 右上角弧线
        ctx.moveTo(x + r, y);
        // 前两个参数是控制点，三四个参数是结束点，最后一个是半径
        ctx.arcTo(x + w, y, x + w, y + r, r);

        // 右下角弧线
        ctx.arcTo(x + w, y + h, x + w - r, y + h, r);

        // 左下角弧线
        ctx.arcTo(x, y + h, x, y + h - r, r);

        // 左上角弧线
        ctx.arcTo(x, y, x + r, y, r);
    },
    // 点击保存图片
    savePic(e: any) {
        let type = e.currentTarget.dataset.type
        let that = this
        // 生成加载中
        wx.showLoading({
            title: '努力生成中...'
        })
        // 把当前画布指定区域的内容导出生成指定大小的图片
        wx.canvasToTempFilePath({
            // x: (that.data.windowW - 279) / 2,
            // y: 32,
            // width: 279,
            // height: that.data.currentLineHeight,
            canvas: type == 'post' ? this.data.canvas : this.data.signCanvas,
            success: function (res) {
                console.log(res.tempFilePath)
                that.setData({
                    preurl: res.tempFilePath,
                })
                setTimeout(() => {
                    that.saveQrcode()
                }, 200);
            },
            fail: function (res) {
                // 如果生成图片失败，也会停止加载
                wx.hideLoading()
                console.log(res)
            }
        })
    },
    // 准备存储图片
    saveQrcode() {
        const that = this;
        // 获取手机权限
        wx.getSetting({
            success: (res) => {
                if (!res.authSetting['scope.writePhotosAlbum']) {
                    // 如果之前没有开启存储到相册的权限，就请求权限
                    wx.authorize({
                        scope: 'scope.writePhotosAlbum',
                        success: (res) => {
                            wx.hideLoading()
                            this.eventSave()
                        },
                        fail: err => {
                            wx.hideLoading()
                            if (err.errMsg.includes('authorize:fail')) {
                                // 重新打开相册权限
                                wx.openSetting({
                                    success(settingdata) {
                                        if (settingdata.authSetting['scope.writePhotosAlbum']) {
                                            // 获取权限成功，给出再次点击图片保存到相册的提示
                                            that.eventSave()
                                        } else {
                                            // 获取权限失败，给出不给权限就无法正常使用的提示
                                        }
                                    },
                                    // 打开权限失败，目前小程序无法在用户未操作的情况下，打开设置页
                                    fail() {
                                        wx.showToast({
                                            icon: "none",
                                            title: "授权失败！请打开小程序-设置，打开存储相册权限"
                                        })
                                    }
                                })
                            }
                        }
                    })
                } else {
                    this.eventSave();
                    wx.hideLoading()
                }
            }
        })
    },
    // 保存图片到相册
    eventSave() {
        let that = this
        wx.saveImageToPhotosAlbum({
            filePath: that.data.preurl,
            success(res) {
                wx.showToast({
                    title: '保存图片成功',
                    icon: 'success',
                    duration: 2000
                })
            }
        })
    },
    // 点击分享按钮
    sharePic() {
        wx.navigateTo({
            url: './sharePIc/index'
        })
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})